<template>
	<div class="app-container">
		<el-table v-loading="loading" :data="mdWhInfoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="70" align="center" />
			<el-table-column label="库房标识" align="center" prop="whId" />
			<el-table-column label="操作标识" align="center" prop="operId" v-if="false" />
			<el-table-column label="库房编号" align="center" prop="whNo" />
			<el-table-column label="库房名称" align="center" prop="name" min-width="180px" />
			<el-table-column label="所属机构" align="center" prop="orgNo" min-width="180px" />
			<el-table-column label="机构级别" align="center" prop="labLevel">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.wh_lab_level" :value="scope.row.labLevel" />
				</template>
			</el-table-column>
			<el-table-column label="库房分类" align="center" prop="typeCode">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.wh_type_code" :value="scope.row.typeCode" />
				</template>
			</el-table-column>
			<el-table-column label="库房级别" align="center" prop="levelCode">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.wh_level_code" :value="scope.row.levelCode" />
				</template>
			</el-table-column>
			<el-table-column label="运转方式" align="center" prop="operateTypeCode">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.wh_operate_type_code" :value="scope.row.operateTypeCode" />
				</template>
			</el-table-column>
			<el-table-column label="自动化设备制造单位" align="center" prop="factoryCode" min-width="180px" />
			<el-table-column label="库房面积" align="center" prop="tSize" />
			<el-table-column label="备注" align="center" prop="remark" min-width="300px" />
			<el-table-column label="建筑面积" align="center" prop="coveredArea" />
			<el-table-column label="库容面积" align="center" prop="capSize" />
			<el-table-column label="管理单位" align="center" prop="deptNo" />
			<el-table-column label="库房状态" align="center" prop="statusCode">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.wh_status_code" :value="scope.row.statusCode" />
				</template>
			</el-table-column>
			<el-table-column label="责任人" align="center" prop="personRespNo" />
			<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
				min-width="170px">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['storage:mdWhInfo:edit']">修改</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改库房信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="140px">
				<el-row>
					<el-col :span="11">
						<el-form-item label="操作标识" prop="operId" v-if="false">
							<el-input v-model.number="form.operId" placeholder="请输入操作标识" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="责任人" prop="personRespNo">
							<el-input v-model="form.personRespNo" placeholder="请输入责任人员姓名" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房编号" prop="whNo">
							<el-input v-model="form.whNo" placeholder="请输入库房编号" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房名称" prop="name">
							<el-input v-model="form.name" placeholder="请输入库房名称" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="所属机构名称" prop="orgNo">
							<el-input v-model="form.orgNo" placeholder="请输入所属机构名称" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="机构级别" prop="labLevel">
							<el-select v-model="form.labLevel" placeholder="请选择机构级别" clearable>
								<el-option v-for="dict in dict.type.wh_lab_level" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房分类" prop="typeCode">
							<el-select v-model="form.typeCode" placeholder="请选择库房分类" clearable>
								<el-option v-for="dict in dict.type.wh_type_code" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房级别" prop="levelCode">
							<el-select v-model="form.levelCode" placeholder="请选择库房级别" clearable>
								<el-option v-for="dict in dict.type.wh_level_code" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="运转方式" prop="operateTypeCode">
							<el-select v-model="form.operateTypeCode" placeholder="请选择运转方式" clearable>
								<el-option v-for="dict in dict.type.wh_operate_type_code" :key="dict.value"
									:label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="自动化设备制造单位" prop="factoryCode">
							<el-input v-model="form.factoryCode" placeholder="请输入自动化设备制造单位" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房面积" prop="tSize">
							<el-input v-model.number="form.tSize" placeholder="请输入库房面积" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="建筑面积" prop="coveredArea">
							<el-input v-model.number="form.coveredArea" placeholder="请输入建筑面积" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库容面积" prop="capSize">
							<el-input v-model.number="form.capSize" placeholder="请输入库容面积" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="管理单位" prop="deptNo">
							<el-input v-model="form.deptNo" placeholder="请输入管理单位" />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="库房状态" prop="statusCode">
							<el-select v-model="form.statusCode" placeholder="请选择库房状态" clearable>
								<el-option v-for="dict in dict.type.wh_status_code" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="form.remark"
								placeholder="请输入备注" />
						</el-form-item></el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listMdWhInfo,
	getMdWhInfo,
	delMdWhInfo,
	addMdWhInfo,
	updateMdWhInfo
} from "@/api/storage/mdWhInfo";

export default {
	name: "MdWhInfo",
	dicts: ['wh_lab_level', 'wh_type_code', 'wh_level_code', 'wh_operate_type_code', 'wh_status_code'],
	data() {
		//自定义验证表单数聚长度
		let operIdValidate = (rule, value, callback) => {
			if (value) {
				if (value.length > 16) {
					callback(new Error("输入长度不得长于16个字符"))
				} else {
					callback()
				}
			} else {
				callback()
			}
		};
		let rowValidate = (rule, value, callback) => {
			if (value) {
				if (value.length > 5) {
					callback(new Error("输入长度不得长于5个字符"))
				} else {
					callback()
				}
			} else {
				callback()
			}
		};
		let numberValidate = (rule, value, callback) => {
			if (value) {
				if (value.length > 32) {
					callback(new Error("输入长度不得长于32个字符"))
				} else {
					callback()
				}
			} else {
				callback()
			}
		};
		let inputValidate = (rule, value, callback) => {
			if (value) {
				if (value.length > 256) {
					callback(new Error("输入长度不得长于256个字符"))
				} else {
					callback()
				}
			} else {
				callback()
			}
		}
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 库房信息表格数据
			mdWhInfoList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				operId: null,
				whNo: null,
				name: null,
				personRespNo: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				//库房标识
				whId: [{
					required: true,
					message: '请输入库房标识',
					trigger: 'blur'
				},
				{
					pattern: /^[1-9]\d{0,15}$/,
					message: '库房标识不能为0，长度不得超过16位数字'
				},
				],
				//机构名称
				orgNo: [{
					required: true,
					message: '请输入所属机构名称',
					trigger: 'blur'
				}, {
					// min: 3,
					max: 16,
					message: '长度不得超过16个字符',
					trigger: 'blur'
				}],
				//机构级别
				labLevel: [{
					required: true,
					message: '请选择机构级别',
					trigger: 'change'
				}],
				//库房分类
				typeCode: [{
					required: true,
					message: '请选择库房分类',
					trigger: 'change'
				}],
				//库房级别
				levelCode: [{
					required: true,
					message: '请选择库房级别',
					trigger: 'change'
				}],
				//管理单位
				deptNo: [{
					required: true,
					message: '请输入管理单位',
					trigger: 'blur'
				}, {
					// min: 3,
					max: 16,
					message: '长度不得超过16个字符',
					trigger: 'blur'
				}],
				//库房状态
				statusCode: [{
					required: true,
					message: '请选择库房状态',
					trigger: 'change'
				}],
				//责任人
				personRespNo: [{
					required: true,
					message: '请输入责任人',
					trigger: 'change'
				}, {
					// min: 3,
					max: 16,
					message: '长度不得超过16个字符',
					trigger: 'blur'
				}],
				//库房编号
				whNo: [{
					required: true,
					message: '请输入库房编号',
					trigger: 'change'
				}, {
					// min: 3,
					max: 16,
					message: '长度不得超过16个字符',
					trigger: 'blur'
				}],
				//自动化设备制造单位
				factoryCode: [{
					required: false,
					validator: numberValidate,
					trigger: 'blur'
				}],
				//库房面积
				tSize: [{
					required: false,
					validator: rowValidate,
					trigger: 'blur'
				}],
				//建筑面积
				coveredArea: [{
					required: false,
					validator: rowValidate,
					trigger: 'blur'
				}],
				//库容面积
				capSize: [{
					required: false,
					validator: rowValidate,
					trigger: 'blur'
				}],
				//备注
				remark: [{
					required: false,
					validator: inputValidate,
					trigger: 'blur'
				}],
				//库房名称
				name: [{
					required: true,
					message: '请输入库房名称',
					trigger: 'change'
				}, {
					// min: 3,
					max: 256,
					message: '长度不得超过256个字符',
					trigger: 'blur'
				}]
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询库房信息列表 */
		getList() {
			this.loading = true;
			listMdWhInfo(this.queryParams).then(response => {
				this.mdWhInfoList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				whId: null,
				operId: null,
				whNo: null,
				name: null,
				orgNo: null,
				labLevel: null,
				typeCode: null,
				levelCode: null,
				operateTypeCode: null,
				factoryCode: null,
				tSize: null,
				remark: null,
				coveredArea: null,
				capSize: null,
				deptNo: null,
				statusCode: null,
				personRespNo: null
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.whId)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加库房信息";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const whId = row.whId || this.ids
			getMdWhInfo(whId).then(response => {
				this.form.statusCode = null
				this.form = response.data;
				this.open = true;
				this.title = "修改库房信息";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.whId != null) {
						updateMdWhInfo(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addMdWhInfo(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const whIds = row.whId || this.ids;
			this.$modal.confirm(`是否确认删除库房信息编号为"${whIds}"的数据项，此项操作不可恢复`).then(function () {
				return delMdWhInfo(whIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => { });
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('storage/mdWhInfo/export', {
				...this.queryParams
			}, `mdWhInfo_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
<style lang="scss" scoped>
.app-container {
	padding: 30px 0;
	box-sizing: border-box;
}

.el-col-11 {
	margin-left: 25px;
}
</style>
